<template>
  <!-- 工具条 -->
  <div class="tools-div">
    <el-button type="success" icon="el-icon-plus" size="mini" @click="add"
      >添 加</el-button
    >
  </div>
  <el-table :data="userList" border style="width: 100%">
    <el-table-column prop="loginName" label="登录名称" width="180" />
    <el-table-column prop="nickName" label="昵称" width="180" />
    <el-table-column prop="name" label="姓名" width="180" />
    <el-table-column prop="phoneNum" label="电话" width="180" />
    <el-table-column prop="email" label="邮箱" width="180" />
    <el-table-column label="操作" align="center" fixed="right">
      <template #default="scope">
        <el-button @click="update(scope.row.id)" type="primary">修改</el-button>
        <el-button @click="deleteUser(scope.row.id)" type="danger"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>

  <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="page"
    :page-sizes="[10, 20, 30, 50]"
    :page-size="pagesize"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total"
  >
  </el-pagination>

  <el-dialog v-model="dialogVisible" title="Outer Dialog">
    <el-form
      ref="dataForm"
      :model="UserInfo"
      label-width="100px"
      size="small"
      style="padding-right: 40px"
    >
      <el-form-item label="用户名" prop="username">
        <el-input v-model="userInfo.loginName" />
      </el-form-item>
      <el-form-item v-if="!userInfo.id" label="密码" prop="password">
        <el-input v-model="userInfo.passwd" type="password" />
      </el-form-item>
      <el-form-item label="昵称" prop="name">
        <el-input v-model="userInfo.nickName" />
      </el-form-item>
      <el-form-item label="姓名" prop="name">
        <el-input v-model="userInfo.name" />
      </el-form-item>
      <el-form-item label="手机" prop="phone">
        <el-input v-model="userInfo.phoneNum" />
      </el-form-item>
      <el-form-item label="邮箱" prop="phone">
        <el-input v-model="userInfo.email" />
      </el-form-item>
    </el-form>

    <el-button
      @click="dialogVisible = false"
      size="small"
      icon="el-icon-refresh-right"
      >取 消</el-button
    >
    <el-button
      type="primary"
      icon="el-icon-check"
      @click="saveOrUpdate()"
      size="small"
      >确 定</el-button
    >
  </el-dialog>
</template>

<script>
import axios from "axios";
const api_url = "http://localhost:18888/admin/user";
export default {
  data() {
    return {
      userList: [],
      page: 1,
      pagesize: 10,
      total: 4,
      dialogVisible: false,
      userInfo: {
        id: "",
        loginName: "",
        passwd: "",
        nickName: "",
        name: "",
        phoneNum: "",
        email: "",
      },
    };
  },

  created() {
    this.list();
  },

  methods: {
    list() {
      // 在 node.js 用GET请求获取远程图片
      axios.get(`${api_url}/list/${this.page}/${this.pagesize}`).then((res) => {
        this.userList = res.data.data.records;
        this.total = res.data.data.total
      });
    },
    deleteUser(id) {
      console.log(id);
      axios.delete(`${api_url}/delete/${id}`).then((res) => {
        this.$message.success(res.data.message);
        this.list();
      });
    },
    handleSizeChange(size) {
      console.log(size);
      this.pagesize = size;
      this.list();
    },
    handleCurrentChange(page) {
        console.log(page);
      this.page = page;
      this.list();
    },
    add() {
      this.userInfo = {};

      this.dialogVisible = true;
    },
    saveOrUpdate() {
      axios.post(`${api_url}/save`, this.userInfo).then((res) => {
        this.$message.success(res.data.message);
        this.dialogVisible = false;
        this.list();
      });
    },
    update(id) {
      this.dialogVisible = true;
      axios.get(`${api_url}/getById/${id}`).then((res) => {
        this.userInfo = res.data.data;
      });
    },
  },
};
</script>


